<template>
  <div id="person_aside">
    <el-container>
      <el-aside width="200px">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          @select="handleSelect"
          router>
          <el-menu-item index="/personalCenter/main/baseInfo">
            <span class="el-icon-tickets"></span>
            <span slot="title">基本信息</span>
          </el-menu-item>
        <el-menu-item index="/personalCenter/main/resume">
          <i class="el-icon-document"></i>
          <span slot="title">我的简历</span>
        </el-menu-item>
        <el-menu-item index="/personalCenter/main/delivery">
          <i class="el-icon-menu"></i>
          <span slot="title">投递管理</span>
        </el-menu-item>
        <el-menu-item index="/personalCenter/main/jobCollect">
          <i class="el-icon-collection"></i>
          <span slot="title">职位收藏</span>
        </el-menu-item>
        <el-menu-item index="/personalCenter/main/VipServer">
          <i class="el-icon-s-finance"></i>
          <span slot="title">会员服务</span>
        </el-menu-item>
          <el-menu-item index="/personalCenter/main/articleManage">
            <i class="el-icon-notebook-1"></i>
            <span slot="title">文章管理</span>
          </el-menu-item>
          <el-menu-item index="/personalCenter/main/writtenInterview">
            <i class="el-icon-video-camera"></i>
            <span slot="title">笔试面试</span>
          </el-menu-item>
          <el-menu-item index="/personalCenter/main/LearnCourse">
            <i class="el-icon-s-management"></i>
            <span slot="title">学习课程</span>
          </el-menu-item>
          <el-menu-item index="/personalCenter/main/communication">
            <i class="el-icon-s-promotion"></i>
            <span slot="title">信息交流</span>
          </el-menu-item>
      </el-menu></el-aside>
        <div id="personal_as" style="transition: all .2s">
          <transition appear name="slide-fade">
            <router-view></router-view>
          </transition>
        </div>

    </el-container>

  </div>
</template>

<script>
export default {
  name: "PersonAside",
  data(){
    return{
      activeIndex:'',
    }
  },
  mounted() {
    this.activeIndex = this.$router.currentRoute.fullPath;
  },
  methods:{
    handleSelect(key){
      if(this.key!=null){
        this.activeIndex=key;
      }
    }
  }
}
</script>

<style scoped>
.el-aside{
  overflow: hidden;
}
#personal_as{

  width:100%;
}
.el-main{
  background-color: white;
}
.slide-fade-enter-active {
  transition: all .2s ease;
  transition-delay: .2s;
}
.slide-fade-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>